<!DOCTYPE html>
<html xmlns="http://www.w3.org/1999/html">
<head>
    <title>MUKEFILE后台管理主页</title>

    <#include "../common/headFile.ftl">

    <style type="text/css">
        .main-top,.btn{background-color: #8666b8}
        .main-title span{font-family: STHeiti}
        .upload{margin-right:20px;}
        #sysProfileTable{
            padding:5px 0 0 20px;
            float: left;
        }
        #main-middle-title{
            font-size: 16px;
            font-family: Poppins;
            padding:5px 0 0 20px;
        }
        #profile-add{
            padding: 10px 20px;
        }
    </style>
</head>
<body>
<div class="main">

    <#--后台管理界面头部-->
    <#include "../common/headNav.ftl">

    <div class="main-middle">

        <#--左侧菜单列表-->
        <#include "../common/leftMenu.ftl">
        <#--添加用户对话框-->
        <#include "../dialog/addUser.ftl">

        <div class="main-middle-right">
            <div id="main-middle-title">
                <span>配置管理</span>
            </div>
            <div class="main-middle-right-content">
                <div id="sysProfileTable">
                    <table id="demo" lay-filter="test"></table>
                    <script type="text/html" id="toolbarDemo">
                        <div class="layui-btn-container">
                            <button class="layui-btn layui-btn-sm" lay-event="add">新增配置</button>
                            <button class="layui-btn layui-btn-sm" lay-event="delete">删除配置</button>
<#--                            <button class="layui-btn layui-btn-sm" lay-event="getCheckData">获取选中行数据</button>-->
<#--                            <button class="layui-btn layui-btn-sm" lay-event="getCheckLength">获取选中数目</button>-->
<#--                            <button class="layui-btn layui-btn-sm" lay-event="isAll">验证是否全选</button>-->
                        </div>
                    </script>
                    <script type="text/html" id="barDemo">
                        <a class="layui-btn layui-btn-xs" lay-event="edit">编辑</a>
                    </script>
                    <script>
                        // 清空表单数据
                        function clearEditProfileForm() {
                            $('#p_name').val('');
                            $('#p_desc').val('');
                            $('#p_value').val('');
                        }
                        // 新增一个配置
                        function addProfile(name,desc,value,table){
                            $.ajax({
                                url:'/sysProfile!addProfile',
                                data:{
                                    profileName:name,
                                    profileDescription:desc,
                                    profileValue:value
                                },
                                success:function (result){
                                    clearEditProfileForm();
                                    // 重载表格
                                    table.reload('profileTable',{
                                        page:{
                                            curr:1
                                        }
                                    });
                                    layer.msg('新增配置成功', {icon: 1});
                                }
                            });
                        }
                        // 编辑一个配置
                        function editProfile(id,name,desc,value){
                            $.ajax({
                                url:'/sysProfile!editProfile',
                                data:{
                                    id:id,
                                    profileName:name,
                                    profileDescription:desc,
                                    profileValue:value
                                },
                                success:function (result){
                                    clearEditProfileForm();
                                    layer.msg('编辑配置成功', {icon: 1});
                                }
                            });
                        }
                        // 删除选中配置
                        function deleteProfile(checkedData,table){
                            $.ajax({
                                url:'/sysProfile!deleteProfile',
                                data:{idx:JSON.stringify(checkedData.data)},
                                success:function (result){
                                    table.reload('profileTable',{
                                        page:{
                                            curr:1
                                        }
                                    });
                                    layer.msg('删除配置成功', {icon: 1});
                                }
                            });
                        }
                        layui.use('table', function(){
                            let table = layui.table;
                            table.render({
                                id: 'profileTable',
                                elem: '#demo',
                                url:'/sysProfile!queryProfile',
                                toolbar: '#toolbarDemo',
                                cellMinWidth: 80,
                                height:400,
                                page:true,
                                cols: [[
                                    {type:'checkbox'},
                                    // {field:'id', width:80, title: 'ID', sort: true},
                                    {field:'profileName', width:250, title: '配置名', sort: true},
                                    {field:'profileDescription', width:400, title: '配置描述', sort: true},
                                    {field:'profileValue', width:200, title: '配置值', sort: true},
                                    {title:'操作', toolbar: '#barDemo',align:'center', width:100}
                                ]]
                            });
                            // 头部事件监听
                            table.on('toolbar(test)', function(obj){
                                let checkStatus = table.checkStatus(obj.config.id);
                                switch(obj.event){
                                    case 'add':
                                        layer.open({
                                            title:'新增配置',
                                            type:1,
                                            area: ['300px', '280px'],
                                            btn: ['保存', '取消'],
                                            content:$('#profile-add'),
                                            yes:function () {
                                                // 保存按钮
                                                // 获取保存的数据
                                                let name = $('#p_name').val();
                                                let desc = $('#p_desc').val();
                                                let value = $('#p_value').val();
                                                // name和value不能为空
                                                if (name === ''){
                                                    layer.msg('配置名不能为空', {icon: 2});
                                                    return;
                                                }
                                                addProfile(name,desc,value,table);
                                                // 关闭编辑框
                                                layer.closeAll();
                                            },
                                            btn2:function () {
                                                // 取消按钮
                                                layer.close();
                                            }
                                        });
                                        break;
                                    case 'delete':
                                        // 删除操作
                                        if (checkStatus.data.length===0){
                                            layer.msg('未选中数据', {icon: 2});
                                            return;
                                        }
                                        layer.confirm('是否删除选中的数据', {
                                            btn: ['删除','取消']
                                        }, function(){
                                            deleteProfile(checkStatus,table);
                                        }, function(){
                                            layer.msg('取消删除', {icon: 2});
                                        });
                                        break;
                                }
                            });
                            //监听行工具事件
                            table.on('tool(test)', function(obj){
                                // 获取行数据
                                let data = obj.data;
                                if(obj.event === 'edit'){
                                    $('#p_name').val(data.profileName);
                                    $('#p_desc').val(data.profileDescription);
                                    $('#p_value').val(data.profileValue);
                                    layer.open({
                                        title:'编辑配置',
                                        type:1,
                                        area: ['300px', '280px'],
                                        btn: ['保存', '取消'],
                                        content:$('#profile-add'),
                                        yes:function () {
                                            // 保存按钮
                                            // 获取保存的数据
                                            let name = $('#p_name').val();
                                            let desc = $('#p_desc').val();
                                            let value = $('#p_value').val();
                                            if (name === ''){
                                                layer.msg('配置名不能为空', {icon: 2});
                                                return;
                                            }
                                            editProfile(obj.data.id,name,desc,value);
                                            // 更新表格数据
                                            obj.update({
                                                profileName:name,
                                                profileDescription:desc,
                                                profileValue:value
                                            })
                                            clearEditProfileForm();
                                            // 关闭编辑框
                                            layer.closeAll();
                                        },
                                        btn2:function () {
                                            clearEditProfileForm();
                                            // 取消按钮
                                            layer.close();
                                        },
                                        cancel:function (index) {
                                            clearEditProfileForm();
                                            layer.close(index);
                                        }
                                    });
                                }
                            });
                        });


                    </script>
                </div>
            </div>
        </div>
    </div>
    <#include "sys_profile_edit.ftl">
    <#-- 	底部		-->
    <#include "../common/bottom.ftl">
</div>
</body>
</html>